<template>
    <div class="menu-top-camp">
        <div class="menu-caipu" v-if="cid == 1">
            <div v-if="isload && menu_data_list_child">
                <div class="menu-header-mid">
                <div class="mid-text" v-on:click="getmidId(0)" v-bind:class="{midactive:mid_clickNum==0}">综合</div>
                <div class="mid-text" v-on:click="getmidId(2)" v-bind:class="{midactive:mid_clickNum==2}">收藏高</div>
                <div class="mid-text" v-on:click="getmidId(3)" v-bind:class="{midactive:mid_clickNum==3}">学做多</div>
            </div>
            <ul>
                <li v-for="(item,index) in menu_data_list_child" v-bind:key="index">
                    <router-link :to="{path:'/detail',query:{id:item.id}}">
                    <div class="img-box">
                        <img v-bind:src="item.img" alt="">
                    </div>
                    <div class="data-box">
                        <div class="food-name">{{item.n}}</div>
                        <div class="tags" v-if="item.recipe_list_tags[0]">
                            <div class="tag" v-for="(aaa,index) in item.recipe_list_tags" v-bind:key="index" v-bind:style="{color:aaa.text_color}">{{aaa.text}}</div>
                        </div>
                        <div class="user-data">
                            <!-- 这个数据没改完 -->
                            <div class="user-headimg">
                                <img v-bind:src="item.a_p" alt="">
                            </div>
                            <div class="user-name">{{item.a_n}}</div>
                        </div>
                    </div>
                    </router-link>
                </li>
            </ul>
            </div>
            <div v-else>
                <jia-zai></jia-zai>
            </div>
            
        </div>
        <div v-else-if="cid == 2">
            笔记
        </div>
        <div v-else-if="cid == 3">
            用户
        </div>
        <div v-else-if="cid == 4">
            商品
        </div>
        <div v-else-if="cid == 5">
            课堂
        </div>
    </div>
    
</template>

<script>
import jiaZai from '@/components/jiazai.vue'
export default {
    components:{
        jiaZai
    },
    props:{
        cid:{
            type:Number
        }
    },
    data(){
        return {
            mid_clickNum:0,
            menu_data_list:[],
            isload:false,
            menu_data_list_child:[]
        }
    },
    methods:{
        getmidId(i){
            // 这个对应mydata的参数order
            this.isload = false;
            this.mid_clickNum = i;
            let _this = this;
            let paramsdata = JSON.parse(localStorage.getItem("mydata_list"));
            paramsdata[0].order =  i;
            console.log(paramsdata[0],"0");
            let url = `https://apis.netstart.cn/douguo/recipe/search`;
            
            let promise = axios.get(url,{params:paramsdata[0]});
            promise.then(
                (res) =>{
                    // console.log(res.data.result);
                    
                    _this.menu_data_list = res.data.result.list;
                    // console.log(_this.menu_data_list);
                    _this.menu_data_list_child = [];

                     _this.menu_data_list.forEach(item=>{
                    // console.log(item);
                    // console.log(item.r.n);
                    //    _this.menu_data_list_child.push(item.r);
                    if(item.r){
                            let obj = {}
                       obj.n = item.r.n;
                    //    obj.recipe_list = item.r.recipe_list;
                       obj.id = item.r.id;
                       obj.img = item.r.img 
                       obj.p = item.r.p
                       obj.a_p = item.r.a.p;
                       obj.a_n = item.r.a.n
                       obj.recipe_list_tags = item.r.recipe_list_tags;
                       _this.menu_data_list_child.push(obj);

                    //    console.log(_this.menu_data_list_child);
                    }
                   })
                    _this.isload = true
                }
            )
        },
        getmuniData(){
            this.isload = false;
            let _this = this;
            this.menu_data_list = []
            let url = `https://apis.netstart.cn/douguo/recipe/search`;
            let paramsdata = JSON.parse(localStorage.getItem("mydata_list"))
            // console.log(paramsdata[0]);
            // console.log(paramsdata[0]);
            let promise = axios.get(url,{params:paramsdata[0]});
            promise.then(
                (res) =>{
                    // console.log(res.data.result);
                    // console.log("成功？");
                    _this.menu_data_list = res.data.result.list;
                    // console.log("成功？");
                   console.log( _this.menu_data_list);
                   _this.menu_data_list.forEach(item=>{
                    // console.log(item);
                    // console.log(item.r.n);
                    //    _this.menu_data_list_child.push(item.r);
                    if(item.r){
                            let obj = {}
                       obj.n = item.r.n;
                    //    obj.recipe_list = item.r.recipe_list;
                       obj.id = item.r.id;
                       obj.img = item.r.img
                       obj.p = item.r.p
                       obj.a_p = item.r.a.p;
                       obj.a_n = item.r.a.n
                       obj.recipe_list_tags = item.r.recipe_list_tags;
                       _this.menu_data_list_child.push(obj);

                    //    console.log(_this.menu_data_list_child);
                    }
                   })
                   _this.isload = true;
                //    console.log(this.menu_data_list_child,"ddd");
                //    console.log(_this.isload);
                }
            )
        }
    },
    created(){
        this.getmuniData();
    }
}
</script>

<style lang="scss">
@import url("../assets/css/style.css");
.menu-top-camp{
    .menu-caipu{
        .menu-header-mid{

            width: 100%;
            height: 30px;
            // background-color: yellowgreen;
            font-size: 16px;
            display: flex;
            justify-content: start;
            line-height: 30px;
            text-align: center;
            .mid-text{
                width: 20%;
                margin-right: 10px;
                box-sizing: border-box;
            }
            .midactive{
                font-size: 20px;
            }
        }
        ul{
            margin: 0;
            padding: 0;
            margin-top: 10px;
            li{
                width: 100%;
                height: 130px;
                // background-color: red;
                margin-bottom: 10px;
                a{
                    height: 130px;
                    width: 100%;
                    font-size: 12px;
                    padding: 0 15px;
                    display: flex;
                    justify-content: start;
                    box-sizing: border-box;
                    .img-box{
                        width: 45%;
                        font-size: 0;
                        img{
                            width: 100%;
                            height: 130px;
                            border-radius: 10px;
                        }
                    }
                    .data-box{
                        width: 55%;
                        padding: 10px 0 10px 10px;
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .food-name{
                            width: 100%;
                            font-size: 16px;
                        }
                        .tags{
                            width: 100%;
                            height: 30px;
                            line-height: 30px;
                            display: flex;
                            margin-left: 10px;
                            justify-content: start;
                            text-align: center;
                            .tag{
                                font-size: 12px;
                                line-height: 30px;
                                margin-right: 5px;
                                
                            }
                        }
                        .user-data{
                            height: 30px;
                            width: 100%;
                            display: flex;
                            justify-content: start;
                            .user-headimg{
                                padding: 5px;
                                width: 30px;
                                height: 30px;
                                font-size: 0;
                                margin-right: 5px;
                                box-sizing: border-box;
                                img{
                                    width: 100%;
                                    border-radius: 50%;
                                    height: 20px;
                                }
                            }
                            .user-name{
                                height: 30px;
                                font-size: 14px;
                                line-height: 30px;
                            }
                        }
                    }
                }
            }
        }
    }
        
}
</style>